<template>
    <view :style="{ '--color': color }">
        <view class="coupon top m-top20">
            <text class="color_33 size32">优惠券</text>
            <view class="couponBox" @click.stop="showCopen">
                <view class="d-flex a-center p-right20" v-if="CouponIsShow && couponId">
                    <block v-if="Sale && Sale.disMoney">
                        <text class="color size26">-￥</text>
                        <text class="color size36">{{ Sale.disMoney.toFixed(2) }}</text>
                    </block>
                </view>

                <text class="color_99 size30 p-right20">{{ pageData.coupon_info ? pageData.coupon_info : pageData.couponLog.length ? '待使用' : '暂无优惠卷' }}</text>

                <!--   <text class="color_99 size30 p-right20" v-if="pageData.couponLog.length">暂无可用</text> -->
                <text class="iconfont icon-xiangyouxiayiye color_99 h6" v-if="pageData.state <= 6 && pageData.payShow != 0"></text>
            </view>
        </view>

        <u-popup :show="Show" @close="Show = false" mode="bottom" :round="10" closeable>
            <view class="Wrapper">
                <view class="head">
                    <view class="head_title">可用优惠券</view>
                    <view class="head_sale" v-if="pageData.coupon_info">
                        {{ pageData.coupon_info }}
                    </view>
                </view>

                <view class="content">
                    <view class="Lists" @click="Use_couponId(item.couponId)" :class="{ Active: couponId == item.couponId }" v-for="(item, index) in pageData.couponLog" :key="index">
                        <!-- 抵用券 1 -->
                        <view class="cou_Left" v-if="item.type == 1">
                            <view class="d-flex a-center white">
                                <text class="unit">{{ item.unit }}</text>
                                <text class="bold" :class="[getPriceClass(item)]">{{ item.price }}</text>
                            </view>
                        </view>
                        <!-- 折扣券 2 -->
                        <view class="cou_Left" v-if="item.type == 2">
                            <view class="d-flex a-center white">
                                <text class="size66 bold">{{ item.price }}</text>
                                <text class="h6 m-top28 m-left4">{{ item.priElse }}</text>
                            </view>
                        </view>
                        <view class="cou_Center">
                            <text class="ellipsis_2 cou_title">{{ item.title }}</text>
                            <text class="color_99 size22">{{ item.expiryDate }}</text>
                            <text class="ellipsis color_33 h6">{{ item.info }}</text>
                        </view>
                        <view class="cou_Rigth">
                            <text class="icon-xuanzhong iconfont size28"></text>
                        </view>
                    </view>

                    <emptys empty="coupon" v-if="!pageData.couponLog.length" title="~暂无可用优惠券~"></emptys>
                </view>
                <view class="footer" v-if="pageData.couponLog.length">
                    <view class="newCreat" @click="Show = false">确定</view>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    export default {
        props: ['pageData', 'Sale', 'coupon_id'],
        data() {
            return {
                coupon: [],
                couponId: '',
                Show: false,
                CouponIsShow: false
            };
        },

        methods: {
            showCopen() {
                if (this.pageData.payShow == 0) return;
                this.Show = true;
            },
            Use_couponId(couponId) {
                if (this.couponId != couponId) {
                    this.couponId = couponId;
                } else {
                    this.couponId = '';
                }
                this.$emit('Use_couponId', this.couponId);
            },
            Acquire() {
                this.couponId = '';
                this.$emit('Use_couponId', this.couponId);
            },

            getPriceClass(item) {
                return item.price >= 10000 ? 'size50' : 'size66';
            }
        },

        computed: {
            ...mapState(['color', 'vid']),
            sheets() {
                if (!this.Sale || !this.Sale.usedCoupon) return;
                return this.Sale.usedCoupon.length;
            }
        },
        watch: {
            coupon_id: {
                immediate: true,
                handler(newVal) {
                    if (newVal) this.couponId = newVal;
                    console.log(this.couponId, 'this.couponId');
                }
            }
        }
    };
</script>
<!-- 
  type  1 抵用卷 2 折扣卷 3 兑换卷 4 免邮卷 
 
 -->
<style lang="scss" scoped>
    @mixin Fleac {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .Wrapper {
        width: 100%;

        .head {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;

            &_title {
                width: 100%;
                padding: 30rpx 0 30rpx;
                display: flex;
                justify-content: center;
                color: #000;
                font-size: 34rpx;
                border-bottom: 1rpx solid rgba(153, 153, 153, 0.3);
            }

            &_sale {
                width: 100%;
                padding: 20rpx 24rpx;

                .Sale_txt {
                    color: #000;
                    font-size: 24rpx;
                    font-weight: normal;
                }
            }
        }

        .content {
            width: 100%;
            background-color: #f7f8fa;
            height: 800rpx;
            padding: 0 24rpx 24rpx;
            overflow-y: scroll;

            .Lists {
                width: 100%;
                height: 200rpx;
                background-color: #ffffff;
                margin-top: 24rpx;
                display: flex;
                align-items: center;
                border-radius: 10rpx;
                overflow: hidden;

                .cou_Left {
                    @include Fleac;
                    flex-direction: column;
                    width: 200rpx;
                    height: 100%;
                    background-image: linear-gradient(to right, #6b98db, #6a7dd6);

                    .unit {
                        font-size: 28rpx;
                        margin-top: 22rpx;
                    }
                }

                .cou_Center {
                    flex: 1;
                    height: 200rpx;
                    padding: 14rpx 20rpx;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;

                    .cou_title {
                        color: #000;
                        font-size: 32rpx;
                    }
                }
            }

            .PointsList {
                width: 100%;
                padding: 30rpx 24rpx;
                background-color: #ffffff;
                border-radius: 10rpx;
                margin-top: 24rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            .cou_Rigth {
                width: 34rpx;
                height: 34rpx;
                border: 1px solid #ccc;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-right: 20rpx;
            }

            .Active {
                .cou_Rigth {
                    background-color: var(--color);
                    border: 1px solid var(--color);
                }
            }
        }

        .footer {
            width: 100%;
            height: 100rpx;
            @include Fleac;

            .newCreat {
                @include Fleac;
                width: 600rpx;
                height: 70rpx;
                background-color: var(--color);
                border-radius: 35rpx;
                color: #ffffff;
                font-size: 32rpx;
            }
        }
    }

    .coupon {
        width: 100%;
        padding: 20rpx 0;
        display: flex;
        align-items: center;

        .couponBox {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }
    }
</style>
